<template>
  <PageWrapper>
    <a-button @click="handleClick">打开弹窗</a-button>
    <a-button @click="handleClickRef">打开弹窗Ref</a-button>
    <UserFormModal @register="register" />
    <UserFormModalRef ref="userFormModalRef" />
  </PageWrapper>
</template>
<script setup lang="ts">
  import { PageWrapper } from '@/components/Page';
  import { useModal } from '@/components/Modal';
  import UserFormModal from './components/UserFormModal.vue';
  import UserFormModalRef from './components/UserFormModalRef.vue';
  import { ref } from 'vue';

  const userFormModalRef = ref();
  const [register, { openModal }] = useModal();
  const handleClick = () => {
    openModal(true, {
      userName: 'admin',
      // realName: '张三',
    });
  };
  const handleClickRef = () => {
    userFormModalRef.value.show({
      userName: 'admin',
    });
  };
</script>
<style lang="less" scoped></style>
